<template>
    <div id="my-files">
<!-- 圈渐变 -->
        <div>
            <!-- 圈渐变 蓝 -->
            <svg style="position:absolute;left:-99999px;" width="100%" height="100%">
                <defs>
                    <linearGradient id="svgblue" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#32b0fe" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#3972fd" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
            <!-- 圈渐变 绿 -->
            <svg style="position:absolute;left:-99999px;" width="100%" height="100%">
                <defs>
                    <linearGradient id="svggreen" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#3ecfbd" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#21afcb" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
            <!-- 圈渐变 粉 -->
            <svg style="position:absolute;left:-99999px;" width="100%" height="100%">
                <defs>
                    <linearGradient id="svgpink" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#fd9091" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#e76581" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
            <!-- 圈渐变 黄 -->
            <svg style="position:absolute;left:-99999px;" width="100%" height="100%">
                <defs>
                    <linearGradient id="svgyellow" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#fdb963" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#fc7136" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
        </div>
<!-- 圈渐变 end -->
        <div v-if="resData" class="ts-content">
            <el-row :gutter="10" style="margin-bottom:20px;">
                <el-col :span="10">
                    <div class="row-a ts-box" style="height:220px;justify-content: center;">
                        <div class="row-a-face">
                            <div class="row-a-face-box">
                                <img :src="resData.iconUrl" alt="">
                            </div>
                            <div class="row-a-face-text">
                                <div style="margin-top: 10px;">姓名：<span class="bold blue">{{ resData.name }}</span></div>
                                <div>学号：<span class="bold blue">{{ resData.userNumber }}</span></div>
                            </div>
                        </div>
                        <div v-show="0" style="width:1px;height:60%;background:#e8e8e8;margin-top:46px;"></div>
                        <div class="row-a-face" v-show="0">
                            <div class="row-a-face-box" style="overflow:hidden;padding: 40px 0 0;box-sizing: border-box;background:#e7f0fe;">
                                <i style="font-size:50px;color:#96abca;" class="iconfont icon-banjiguanli"></i>
                            </div>
                            <div class="row-a-face-text">
                                <div style="margin-top: 10px;">{{ resData.className }}</div>
                                <div>年级：{{ resData.grade }}年级</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="ts-box" style="height:220px;box-shadow: none;">
                        <div class="ts-main" style="padding:0;background:#f8f8f8;display:block;">
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <div class="row-a-col">
                                        <div class="row-a-col1">
                                            <div class="row-a-col1txt">学习课程数</div>
                                            <div class="bold blue"><span class="fs24">{{ resData.courseNum }}</span> 个</div>
                                        </div>
                                        <div class="row-a-col2">
                                            <i style="color:#177aeb;" class="iconfont icon-jingpinkecheng"></i>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="row-a-col">
                                        <div class="row-a-col1">
                                            <div class="row-a-col1txt">注册时间</div>
                                            <div class="bold blue fs20">{{ resData.regTime }}</div>
                                        </div>
                                        <div class="row-a-col2">
                                            <i style="color:#5bd36f;" class="iconfont icon-zhuceshenpi"></i>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <div class="row-a-col">
                                        <div class="row-a-col1">
                                            <div class="row-a-col1txt">登录次数</div>
                                            <div class="bold blue"><span class="fs24">{{ resData.loginNum }}</span> 次</div>
                                        </div>
                                        <div class="row-a-col2">
                                            <i style="color:#f0382e;" class="iconfont icon-diannao1"></i>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="row-a-col">
                                        <div class="row-a-col1">
                                            <div class="row-a-col1txt">学习时长</div>
                                            <div class="bold blue"><span class="fs20">{{ resData.learnTime }}</span></div>
                                        </div>
                                        <div class="row-a-col2">
                                            <i style="color:#5957cf;" class="iconfont icon-shichang"></i>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
<!-- 学习轨迹 -->
            <el-row :gutter="10" style="margin-bottom:20px;">
                <el-col :span="24">
                    <div class="ts-box">
                        <div class="ts-title-box">
                            <div class="ts-title-blue">学习轨迹</div>
                        </div>
                        <div v-if="gjList.length" class="ts-main" style="position:relative;display:block;">
                            <el-carousel :initial-index="gjDefaultIndex.initialIndex" v-if="gjList.length > 0" height="190px" @change="carouselChange" arrow="always" :autoplay="false" :loop="false" indicator-position="outside">
                                <el-carousel-item v-for="item in gjLength" :key="item">
                                    <div class="steps" v-if="gjList.length > 0">
                                        <div @click="steep(gjDefaultIndex.gjIndex*6+index,item)"
                                             class="gj-li" v-for="(item,index) in gjSteepList" :key="index" 
                                             :class="{ active : gjDefaultIndex.tabActive == gjDefaultIndex.gjIndex*6 + index }">
                                            <div class="gj-name">
                                                <div class="gj-name-cell">
                                                    <div :title="item.name">
                                                        {{ item.name }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="gj-circle"></div>
                                            <div class="gj-time">{{item.entryTime}}</div>
                                        </div>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </el-col>
            </el-row>
<!-- 学习轨迹 end -->
            <div v-show="gjData">
<!-- 课程 -->
                <el-row :gutter="10">
                    <el-col :span="24">
                        <div class="ts-box" style="min-height:50px; height:50px;line-height:50px;padding: 5px 0;">
                            <div class="ts-title-box">
                                <div style="height:50px;line-height:50px;font-size:16px;" class="ts-title-blue">课程：{{ gjTopData.name }} <span class="ts-subtitle-blue">加入时间 {{ gjTopData.entryTime }}</span></div>
                                <div class="fs14" style="color:#989898;line-height: 52px;">数据统计截止至 {{ gjTopData.classUpdateTime }}</div>
                                <!-- <router-link to="#" class="ts-more">详情></router-link> -->
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="10">
                        <div class="ts-box">
                            <div class="ts-main" style="height:200px;color:#fff;">
                                <div class="time-box tst-1">
                                    <div>
                                        <div>实验视频总时长</div>
                                        <div><span class="fs18">{{ gjData.experimentVideoTime }}</span></div>
                                    </div>
                                </div>
                                <div class="time-box tst-2">
                                    <div>
                                        <div>实验学习总时长</div>
                                        <div><span class="fs18">{{ gjData.experimentTime }}</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="ts-box">
                            <div class="ts-main" style="height:200px;flex-direction: column;">
                                <div>
                                    实验判定通过率
                                    <span class="fs20 bold qblue">{{ gjData.experimentPassedRate }}%</span>
                                    <!-- 2021-01-26注释 -->
                                    <el-tooltip class="item" effect="dark" content="请认真完成所有实验步骤。" placement="bottom">
                                        <i  class="iconfont icon-wenti-m"></i>
                                    </el-tooltip>
                                </div>
                                <div class="ts-pd">
                                    <div :style="`width:${gjData.experimentPassedRate}%`" class="ts-pd1"></div>
                                    <div :style="`width:${100-gjData.experimentPassedRate}%`" class="ts-pd2"></div>
                                </div>
                                <div>
                                    <span style="margin-right:20px;" class="fs16 bold qblue">通过{{ gjData.experimentPassedNum }}</span>
                                    <span class="fs16 bold qred">未通过{{ gjData.experimentUnpassedNum }}</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="ts-box">
                            <div class="ts-main" style="position:relative;height:200px;">
                                <a class="ts-more" @click="getSybgData" href="javascript:;" style="position:absolute;top:0;right:10px;font-size:14px;">详情></a>
                                <div style="margin-right:40px;" v-if="gjData">
                                    <el-progress :width="130" :height="130"  :stroke-width="20" type="circle" :percentage="gjData.reportSubmittedRate-0" status="text">
                                        <div style="font-size:26px;font-weight:bold;color:#1277eb;">{{ gjData.reportSubmittedRate }}%</div>
                                    </el-progress>
                                    <div style="font-size:14px;color:#3a3a3a;text-align:center;">实验报告提交率</div>
                                </div>
                                <div>
                                    <div class="bold fs20" style="color:#3a71ff;text-align:center;">{{ gjData.reportSubmittedNum }}</div>
                                    <div>已提交</div>
                                    <div class="bold fs20" style="margin-top:10px;text-align:center;color:#e66480;">{{ gjData.reportUnsubmittedNum }}</div>
                                    <div>未提交</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="10">
                        <el-row :gutter="10">
                            <el-col :span="24">
                                <div class="ts-box">
                                    <div class="ts-main" style="height:200px;color:#fff;">
                                        <div class="time-box tst-3">
                                            <div>
                                                <div>理论视频总时长</div>
                                                <div><span class="fs18">{{ gjData.theoryVideoTime }}</span></div>
                                            </div>
                                        </div>
                                        <div class="time-box tst-4">
                                            <div>
                                                <div>理论学习总时长</div>
                                                <div><span class="fs18">{{ gjData.theoryTime }}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10" style="margin-bottom:0;">
                            <el-col :span="24">
                                <div class="ts-box">
                                    <div class="ts-main" style="height:200px;position:relative;">
                                        <a class="ts-more" @click="getStlxData()" href="javascript:;" style="position:absolute;top:0;right:10px;font-size:14px;">详情></a>
                                        <div style="margin-right:40px;" v-if="gjData">
                                            <el-progress class="sgreen" :width="130" :height="130" :stroke-width="20" type="circle" :percentage="gjData.practiceSubmittedRate-0" status="text">
                                                <div style="font-size:26px;font-weight:bold;color:#21aecc;">{{ gjData.practiceSubmittedRate }}%</div>
                                            </el-progress>
                                            <div style="font-size:14px;color:#3a3a3a;text-align:center;">随堂练习提交率</div>
                                        </div>
                                        <div style="min-width:100px;">
                                            <div class="bold fs20" style="color:#3a71ff;text-align:center;">{{ gjData.practiceSubmittedNum }}</div>
                                            <div style="text-align:center;">已提交</div>
                                        </div>
                                        <div>
                                            <div class="bold fs20" style="color:#e66480;text-align:center;">{{ gjData.practiceUnsubmittedNum }}</div>
                                            <div style="text-align:center;">未提交</div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="14">
                        <div class="ts-box" style="background:#fff;position:relative;">
                            <div class="ts-main" style="height:420px;display:block;">
                                <div style="display:flex;align-items: center;">
                                    <div class="fs14" style="min-width:120px;text-align:center;">
                                        <div class="bold fs24 blue">{{ gjData.questionAnwserNum }}</div>
                                        <div>问答回答</div>
                                        <div style="line-height:12px;">总次数</div>
                                    </div>
                                    <div id="pictorialBar1" style="width: 511px;height:200px;"></div>
                                </div>
                                <div style="height:1px;background:#E8E8E8; width:80%;margin:10px auto;"></div>
                                <div style="display:flex;align-items: center;">
                                    <div class="fs14" style="min-width:120px;text-align:center;">
                                        <div class="bold fs24 blue">{{ gjData.choiceAnwserNum }}</div>
                                        <div>判断回答</div>
                                        <div style="line-height:12px;">总次数</div>
                                    </div>
                                    <div id="pictorialBar2" style="width: 511px;height:200px;"></div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10" v-if="gjData">
                    <el-col :span="5">
                        <div v-if="gjData.examScores.length" class="ts-box ts-cj-box">
                            <el-carousel :autoplay="false" height="200px">
                                <el-carousel-item v-for="(item,index) in gjData.examScores" :key="index">
                                    <div class="ts-cj">
                                        <div>
                                            <div class="fs30 bold" style="color: rgb(58, 113, 255);margin-bottom:10px;">
                                                {{ item }}
                                            </div>
                                            <div>第{{ index+1 }}次考试成绩</div>
                                        </div>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div v-else class="ts-box ts-cj-box">
                            <div class="ts-cj" style="height:200px;">
                                <div>
                                    <div class="fs30 bold" style="color: rgb(58, 113, 255);margin-bottom:10px;">
                                        0
                                    </div>
                                    <div>暂无考试</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="ts-box">
                            <div class="ts-cq">
                                <div class="ts-cq-a">
                                    <div>出勤次数</div>
                                    <div class="fs24 blue">
                                        <span class="fs30 bold">{{ gjData.attendanceNum }}</span>/{{ gjData.attendanceSum }}
                                    </div>
                                </div>
                                <div class="ts-cq-b" v-if="gjData">
                                    <el-progress :text-inside="true" :stroke-width="18" class="lineblue" :percentage="gjData.attendanceRate-0"></el-progress>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="ts-box">
                            <div class="ts-main" style="height:200px;justify-content:center;">
                                <div style="display:flex;">
                                    <div>
                                        <img src="../../../assets/images/ts-q1.jpg" alt="">
                                    </div>
                                    <div style="min-width:100px;margin:0 0 0 20px;">
                                        <div class="bold fs24" style="color:#3a71ff;">{{ gjData.problemNum }}</div>
                                        <div>问题交流提问数</div>
                                    </div>
                                </div>
                                <div style="background: #E8E8E8;width:1px; height:80px;margin:0 50px"></div>
                                <div style="display:flex;">
                                    <div>
                                        <img src="../../../assets/images/ts-q3.jpg" alt="">
                                    </div>
                                    <div style="min-width:100px;margin:0 0 0 20px;">
                                        <div class="bold fs24" style="color:#21aecc;">{{ gjData.problemAnwserNum }}</div>
                                        <div>问题交流回答数</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div v-show="gjData == ''" class="ts-content" style="background: #fff;border-radius:3px; box-shadow: 0 0 10px rgba(0,0,0,0.05);height: 200px;text-align: center;padding: 50px 0 20px;">
                <img src='../../../assets/images/empty.png'/>
                <p style="line-height:40px;">暂无数据</p>
            </div>
<!-- 课程 end -->
        </div>
        <div v-else class="ts-content" style="background: #fff;border-radius:3px; box-shadow: 0 0 10px rgba(0,0,0,0.05);height: 500px;text-align: center;padding: 250px 0 20px;">
            <img src='../../../assets/images/empty.png'/>
            <p style="line-height:40px;">暂无数据</p>
        </div>
        <!-- 随堂练习弹窗 -->
        <el-dialog @close="closeStlxDialog" :close-on-click-modal="false"  :title="`${resData.name}随堂练习提交详情`" :visible.sync="stlx.dialog" width="850px" >
            <div class="table" v-if="stlx.tableData.length">
                <el-table  :data="stlx.tableData" ref="multipleTable"  style="width: 100%">
                    <el-table-column width="55" label="序号">
                        <template slot-scope="scope"><span>{{scope.$index+(stlx.pageNum - 1) * stlx.pageSize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column prop="name" label="章节名称">
                        <template slot-scope="scope">
                            <div v-if="scope.row.opened" :title="scope.row.name">{{ scope.row.name }}</div>
                            <div v-else :title="scope.row.name">{{ scope.row.name }}（未公开）</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="practiceStatusStr" label="状态" width="80"></el-table-column>
                    <el-table-column label="分数" width="80">
                        <template slot-scope="scope">
                            <div v-if="scope.row.practiceScore" class="ts-c-blue">{{ scope.row.practiceScore }}</div>
                            <div v-else class="ts-c-blue">-</div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="stlxSizeChange"
                    @current-change="stlxCurrentChange"
                    :current-page="stlx.pageNum"
                    :page-size="stlx.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="stlx.total">
                </el-pagination>
            </div>
        </el-dialog>
        <!-- 实验报告弹窗 -->
        <el-dialog @close="closeSybgDialog" :close-on-click-modal="false"  :title="`${resData.name}实验报告提交详情`" :visible.sync="sybg.dialog" width="850px" >
            <div class="table">
                <el-table  :data="sybg.tableData" ref="multipleTable"  style="width: 100%">
                    <el-table-column width="55" label="序号">
                        <template slot-scope="scope"><span>{{scope.$index+(sybg.pageNum - 1) * sybg.pageSize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column prop="name" label="章节名称">
                        <template slot-scope="scope">
                            <div v-if="scope.row.opened" :title="scope.row.name">{{ scope.row.name }}</div>
                            <div v-else :title="scope.row.name">{{ scope.row.name }}（未公开）</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reportStatusStr" label="状态" width="80"></el-table-column>
                    <el-table-column label="分数" width="80">
                        <template slot-scope="scope">
                            <div v-if="scope.row.reportScore" class="ts-c-blue">{{ scope.row.reportScore }}</div>
                            <div v-else class="ts-c-blue">-</div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="sybgSizeChange"
                    @current-change="sybgCurrentChange"
                    :current-page="sybg.pageNum"
                    :page-size="sybg.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="sybg.total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        data () {
            return{
                isAnimate:true,
                classId:this.$route.query.classId,
                userId:this.$route.query.userId,
                courseId:this.$route.query.courseId,
                courseId:'',
                tpd:50,
                gjList:[],
                //随堂练习
                stlx:{
                    dialog:false,
                    pageNum: 1,
                    pageSize: 10,
                    total: 1000,
                    tableData:[],
                },
                //实验报告
                sybg:{
                    dialog:false,
                    pageNum: 1,
                    pageSize: 10,
                    total: 1000,
                    tableData:[],
                },
                //整体数据
                resData:'',
                //轨迹数据
                gjData:'',
                //轨迹头部数据
                gjTopData:{
                    //课程id
                    id:0,
                    name:'',
                    entryTime:'',
                    classUpdateTime:'',
                },
                //轨迹默认第几篇第几个
                gjDefaultIndex:{
                    //篇
                    initialIndex:0,
                    //个
                    gjIndex:0,
                    //高亮 总的个数
                    tabActive:0,
                },
            }
        },
        computed:{
            gjLength:function(){
                let self = this;
                let n = 0;
                let s = self.gjList.length%6 > 0 ? n=1 : n=0;
                return parseInt(self.gjList.length/6) + s
            },
            gjSteepList:function(){
                let self = this;
                //当前页
                let ci = self.gjDefaultIndex.gjIndex
                //共多少页
                let cl = self.gjLength
                //整体数组
                let s = self.gjList
                let res = s.filter((item,index) => index >= ci*6 && index < ci*6+6);
                return res;
            },
        },
        created() {   
           this.courseId = this.$localstorage.getLocalStorage('setCourseId');
        },
        mounted(){
            this.init();
        },
        methods:{
            init(){
                this.getAllData();
            },
            getAllData(){
                this.getData();
            },
            //学习轨迹change
            carouselChange(index){
                this.gjDefaultIndex.gjIndex = index;
                console.log(index,1132);
            },
//随堂练习
            //获取随堂练习详情数据
            getStlxData(){
                let self = this;
                let courseId = self.gjTopData.id;
                let classId = self.classId;
                let userId = self.userId;
                let pageNum = self.stlx.pageNum;
                let pageSize = self.stlx.pageSize;
                self.$http.get(`/tes/statistic/course/${courseId}/class/${classId}/chapter?pageNum=${pageNum}&pageSize=${pageSize}`).then((response) => {
                    let res = response.data;
                    if(res.code == '200'){
                       self.stlx.dialog = true;
                       self.stlx.total = res.data.total;
                       self.stlx.tableData = res.data.content;
                    }
                    //没数据
                    else if(res.code == '404'){
                        self.stlx.tableData = '';
                        self.$message.error(res.message)
                    }
                    else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //分页
			stlxSizeChange(size) {
				this.stlx.pageSize = size;
			},
			stlxCurrentChange(currentPage) {
                this.stlx.pageNum = currentPage
                this.getStlxData()
            },
            closeStlxDialog(){
                this.stlx.pageNum = 1;
            },
//随堂练习 end

//实验报告
            //获取实验报告详情数据
            getSybgData(){
                let self = this;
                let courseId = self.gjTopData.id;
                let classId = self.classId;
                let userId = self.userId;
                let pageNum = self.sybg.pageNum;
                let pageSize = self.sybg.pageSize;
                self.$http.get(`/tes/statistic/course/${courseId}/class/${classId}/task?pageNum=${pageNum}&pageSize=${pageSize}`).then((response) => {
                    let res = response.data;
                    if(res.code == '200'){
                       self.sybg.dialog = true;
                       self.sybg.total = res.data.total;
                       self.sybg.tableData = res.data.content;
                    }
                    //没数据
                    else if(res.code == '404'){
                        self.sybg.tableData = '';
                        self.$message.error(res.message)
                    }
                    else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //分页
			sybgSizeChange(size) {
				this.sybg.pageSize = size;
			},
			sybgCurrentChange(currentPage) {
                this.sybg.pageNum = currentPage
                this.getSybgData()
            },
            closeSybgDialog(){
                this.sybg.pageNum = 1;
            },
//实验报告 end
            getData(){
                let self = this;
                let classId = self.classId;
                let userId = self.userId;
                let courseId = self.courseId;
                //清空轨迹数组，点上一份下一份时确保有数据后加载
                self.gjList = [];
                ///statistic/student
                self.$http.get(`/tes/statistic/student`).then((response) => {
                    let res = response.data;
                    //
                    let dcarr = [];
                    for(let i=0;i<6;i++){
                        let dcobj = {
                            entryTime: "2020/09/29",
                            id: i+1,
                            name: "123"
                        };
                        dcarr.push(dcobj);
                    }
                    //
                    if(res.code == '200'){
                        self.resData = res.data;
                        //
                        //self.gjList = dcarr.concat(res.data.courseInfo);
                        //
                        self.gjList = res.data.courseInfo;
                        console.log(self.gjList,3456);
                        //展示第一个
                        self.$nextTick(function(){
                            self.steep(0,self.gjList[0]);
                        });
                    }
                    //没数据
                    else if(res.code == '404'){
                        self.resData = '';
                    }
                    else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //学习轨迹click
            steep(n,row){
                let self = this;
                if(self.gjTopData.id == row.id){
                    return;
                }
                //高亮
                self.gjDefaultIndex.tabActive = n;
                //轨迹头显示数据
                self.gjTopData.name = row.name;
                self.gjTopData.entryTime = row.entryTime;
                self.gjTopData.id = row.id;
                self.gjTopData.classUpdateTime = row.classUpdateTime;
                console.log(document.getElementById('pictorialBar1'),8888);
                //图形loading
                let myChart2 = echarts.init(document.getElementById('pictorialBar1'));
                myChart2.showLoading({
                    text: '数据正在加载...',
                });
                let myChart3 = echarts.init(document.getElementById('pictorialBar2'));
                myChart3.showLoading({
                    text: '数据正在加载...',
                });
                self.getGjData(row);
            },
            //轨迹数据
            getGjData(row){
                let self = this;
                self.isAnimate = false;
                let courseId = row.id;
                let classId = row.classId;
                //获取classId
                self.classId = row.classId;
                let userId = self.userId;
                const loading = this.$loading({
                    lock: true,
                    text: '数据加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.get(`/tes/statistic/student/class/${classId}/user/course/${courseId}`).then((response) => {
                    let res = response.data;
                    if(res.code == '200'){
                       self.isAnimate = true;
                       self.gjData = res.data;
                       self.drawChartpb1(res.data);
                       self.drawChartpb2(res.data);
                    }
                    //没数据
                    else if(res.code == '404'){
                        self.gjData = '';
                    }
                    else{
                        self.$message.error(res.message)
                    }
                    loading.close();
                }).catch(err => {
                    console.log(err);
                    loading.close();
                });
            },
            //绘图象形图1
            drawChartpb1(res){
                let that = this;
                console.log(res,223344);
                let circle = 'image://';
                let circleb = 'image://';
                let labelSetting = {
                    normal: {
                        show: true,
                        position: 'right',
                        offset: [10, 0],
                        textStyle: {
                            fontSize: 16
                        }
                    }
                };
                //let maxData = 5000;
                let objres = {
                    //优，良，差
                    num:[res.questionAnwserType1Num,res.questionAnwserType2Num,res.questionAnwserType3Num],
                    //百分比
                    bi:[res.questionAnwserType1Rate,res.questionAnwserType2Rate,res.questionAnwserType3Rate],
                };
                console.log(objres,111);
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('pictorialBar1'));
                // 指定图表的配置项和数据
                let option = {
                    //tooltip: {},
                    xAxis: {
                        show:false,
                        splitLine: {show: false},
                        offset: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            margin: 10
                        }
                    },
                    yAxis: {
                        data: [
                            {
                                value:'优秀',
                                textStyle: {
                                    color: '#40a5ff',
                                }
                            },
                            {
                                value:'良好',
                                textStyle: {
                                    color: '#fc6d34',
                                }
                            },
                            {
                                value:'差劲',
                                textStyle: {
                                    color: '#e66480',
                                }
                            }],
                        inverse: true,
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {
                            margin: 10,
                            color: '#40a5ff',
                            fontSize: 14
                        }
                    },
                    grid: {
                        top: 'center',
                        height: 150,
                        left: 50,
                        right: 100
                    },
                    itemStyle:{
                        // borderWidth:-2
                    },
                    series: [
                    {
                        type: 'bar',
                        barWidth: '15',
                        barGap: '-100%',
                        
                        data: [{
                            value:objres.num[0],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#41c4ff'
                                }, {
                                    offset: 1,
                                    color: '#3f72ff'
                                }]),
                            },
                        },
                        {
                            value:objres.num[1],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#fdb65f'
                                }, {
                                    offset: 1,
                                    color: '#fc6c33'
                                }]),
                            },
                        },{
                            value:objres.num[2],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#fc8b8e'
                                }, {
                                    offset: 1,
                                    color: '#e66480'
                                }]),
                            },
                        }],
                    },
                    {
                        type: 'pictorialBar',
                        symbol: circle,
                        symbolRepeat: 'fixed',
                        symbolMargin: '0',
                        symbolClip: true,
                        symbolSize: [13,16],
                        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        //     offset: 0,
                        //     color: 'red'
                        // }, {
                        //     offset: 1,
                        //     color: 'blue'
                        // }]),
                        //symbolBoundingData: maxData,
                        data: objres.num,
                    
                        z: 10
                    }, 
                    //灰底
                    {
                        // full data
                        type: 'pictorialBar',
                        itemStyle: {
                            normal: {
                                opacity: .1
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                let v = params.value;
                                let b = objres.bi[params.dataIndex];
                                return `${v}次(${b} %)`;
                            },
                            position: 'right',
                            offset: [10, 0],
                            color: '#2c5a83',
                            fontSize: 14
                        },
                        animationDuration: 0,
                        symbolRepeat: 'fixed',
                        symbolMargin: '0',
                        symbol: circleb,
                        symbolSize: [13,16],
                        //symbolBoundingData: 10,
                        barMinHeight:1,
                        data: objres.num,
                        z: 5
                    }]
                };
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.hideLoading();
            },
            
            //绘图象形图2
            drawChartpb2(res){
                let that = this;
                console.log(res,223344);
                let circle = 'image://';
                let circleb = 'image://';
                let maxData = 5000;
                let objres = {
                    //正确，错误
                    num:[res.choiceAnwserType1Num,res.choiceAnwserType2Num],
                    //百分比
                    bi:[res.choiceAnwserType1Rate,res.choiceAnwserType2Rate],
                };
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('pictorialBar2'));
                // 指定图表的配置项和数据
                let option = {
                    //tooltip: {},
                    xAxis: {
                        show:false,
                        splitLine: {show: false},
                        offset: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            margin: 10
                        }
                    },
                    yAxis: {
                        data: [
                            {
                                value:'正确',
                                textStyle: {
                                    color: '#40a5ff',
                                }
                            },
                            {
                                value:'错误',
                                textStyle: {
                                    color: '#e66480',
                                }
                            }],
                        inverse: true,
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {
                            margin: 10,
                            color: '#40a5ff',
                            fontSize: 14
                        }
                    },
                    grid: {
                        top: 'center',
                        height: 150,
                        left: 50,
                        right: 100
                    },
                    itemStyle:{
                        borderWidth:0
                    },
                    series: [
                    {
                        type: 'bar',
                        barWidth: '15',
                        barGap: '-100%',
                        
                        data: [{
                            value:objres.num[0],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#41c4ff'
                                }, {
                                    offset: 1,
                                    color: '#3f72ff'
                                }]),
                            },
                        },{
                            value:objres.num[1],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#fc8b8e'
                                }, {
                                    offset: 1,
                                    color: '#e66480'
                                }]),
                            },
                        }],
                    },
                    {
                        type: 'pictorialBar',
                        symbol: circle,
                        symbolRepeat: 'fixed',
                        symbolMargin: '0',
                        symbolClip: true,
                        symbolSize: [13,16],
                        //symbolBoundingData: maxData,
                        data: objres.num,
                    
                        z: 10
                    }, 
                    //灰底
                    {
                        // full data
                        type: 'pictorialBar',
                        itemStyle: {
                            normal: {
                                opacity: .1
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                let v = params.value;
                                let b = objres.bi[params.dataIndex];
                                return `${v}次(${b} %)`;
                            },
                            position: 'right',
                            offset: [10, 0],
                            color: '#2c5a83',
                            fontSize: 14
                        },
                        animationDuration: 0,
                        symbolRepeat: 'fixed',
                        symbolMargin: '0',
                        symbol: circleb,
                        symbolSize: [13,16],
                        //symbolBoundingData: maxData,
                        barMinHeight:1,
                        data: objres.num,
                        z: 5
                    }]
                };
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.hideLoading();
            },
        }
    }
</script>
<style lang="scss">
    #my-files{
        background: #f8f8f8;
        min-height: 500px;
        width: 1200px;
        margin: 0px auto 100px;
        color: #3A3A3A;
        .el-carousel__arrow{
            z-index: 9;
        }
        .ts-ani{
            transform: translate(100px);
            opacity: 0;
        }
        .ts-animate{
            transition: all .5s;
            transform: translate(0px);
        }
        .ts-content{
            margin-top:20px;
            line-height: 30px;
        }
        .sdgx{
            color:#385899;
            font-size: 16px;
            cursor: pointer;
            margin-left:20px;
        }
        .subtitle{
            font-size: 14px;
            color:#989898;
        }
        .el-progress-circle .el-progress-circle__track{
            stroke:#f0f0f0;
        }
        .el-progress-circle__path {
            stroke: url(#svgblue);
        }
        .sgreen .el-progress-circle__path{
            stroke: url(#svggreen);
        }
        .spink .el-progress-circle__path{
            stroke: url(#svgpink);
        }
        .syellow .el-progress-circle__path{
            stroke: url(#svgyellow);
        }
        .linepink .el-progress-bar__inner{
            background-image: linear-gradient(to right, #fd8d8e , #e56280);
        }
        .lineyellow .el-progress-bar__inner{
            background-image: linear-gradient(to right, #fdb75f , #fc6b33);
        }
        .lineblue .el-progress-bar__inner{
            background-image: linear-gradient(to right, #439dff , #3969ff);
        }
        .ts-title-box{
            display:flex;
            justify-content: space-between;
            padding:0 20px;
            line-height: 40px;
            font-size: 16px;
            color:#3A3A3A;
            .ts-title-blue{
                position: relative;
                color:#385899;
                font-size: 18px;
                line-height: 50px;
                &::before{
                    content:'';
                    position:absolute;
                    top:15px;
                    left:-20px;
                    width:5px;
                    height:20px;
                    background:#385899;
                }
                .ts-subtitle-blue{
                    color:#989898;
                    font-size: 14px;
                    margin-left:10px;
                    line-height: 50px;
                }
            }
            a{
                color:#727272;
            }
            .ts-subtitle{
                color:#989898;
                font-size:14px;
            }
        }
        
        .ts-more{
            font-size: 14px;
            color:#acacac;
            &:hover{
                color:#1277eb;
            }
        }
        .ts-main{
            display:flex;
            justify-content: center;
            align-items: center;
            padding:0 30px;
        }
        .ts-box{
            min-height:200px;
            font-size: 16px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);    
            background: #fff;
            border-radius: 3px;
        }
        .time-box{
            min-width:200px;
            height:110px;
            background:Red;
            border-radius: 8px;
            margin:0 10px;
            padding:24px 0 0 20px;
            font-size: 16px;
            box-sizing: border-box;
        }
        .ts-xq{
            position:absolute;
            right:0;
            top:14px;
            color:#fff;
            padding:0px 14px;
            border-radius:20px;
            font-size: 14px;
        }
        .ts-xq.xq-pink{
            background: rgb(231, 101, 129);
            &:hover{
                background: rgba(231, 101, 129,.8);
            }
        }
        .ts-xq.xq-yellow{
            background: rgb(252, 107, 51);
            &:hover{
                background: rgba(252, 107, 51,.8);
            }
        }
        .ts-lastcol{
            display:flex;
            align-items: center;
            position:relative;
            width:580px;
        }
        .tst-1{
            background: url('../../../assets/images/tst-1.png') no-repeat 0 0;
        }
        .tst-2{
            background: url('../../../assets/images/tst-2.png') no-repeat 0 0;
        }
        .tst-3{
            background: url('../../../assets/images/tst-3.png') no-repeat 0 0;
        }
        .tst-4{
            background: url('../../../assets/images/tst-4.png') no-repeat 0 0;
        }
        .ts-pd{
            background:red;
            width:100%;
            height:20px;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            margin:20px 0;
            .ts-pd1{
                transition: .5s;
                height:20px;
                background-image: linear-gradient(to right,#3ecfbd,#1fadcc);
            }
            .ts-pd0{
                transition: .5s;
                width:1%;
                height:20px;
                background: #fff;
            }
            .ts-pd2{
                transition: .5s;
                height:20px;
                background-image: linear-gradient(to right,#fa274e,#f8a269);
            }
        }
        .ts-cj-box{
            .el-carousel__button{
                width:10px;
                height:10px;
                border-radius: 10px;
                opacity: 1;
                display:none;
            }
            .is-active .el-carousel__button{
                background:rgb(58, 113, 255);
            }
            .ts-cj{
                display:flex;
                height: 100%;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
        }
        .ts-cq{
            display:flex;
            width:100%;
            height:200px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            .ts-cq-a{
                width:260px;
                display:flex;
                justify-content: space-between;
                margin-bottom:10px;
            }
            .ts-cq-b{
                width:260px;
                .el-progress__text{
                    // display:none;
                }
                .el-progress-bar__innerText{
                    vertical-align: baseline;
                }
            }
        }
        .el-row{
            margin-bottom:10px;
        }
        .blue{
            color:#1277eb;
        }
        .qblue{
            color:#21aecc;
        }
        .qred{
            color:#f9645a;
        }
        .bold{
            font-weight: bold;
        }
        .jx-content{
            margin: 0px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);    
            border-radius:0;
            padding-bottom:0px;
        }
        .ts-box{
            // background:pink;
        }
        .row-a{
            display:flex;
            .row-a-face{
                display:flex;
                align-items: center;
                margin:0 0 0 40px;
                padding:0px 0 0;
                min-width: 200px; 
                text-align: center;
                font-size:14px;
                .row-a-face-box{
                    display: inline-block;
                    min-width:84px;
                    width:84px;
                    height:84px;
                    border-radius: 100px;
                    background:#333;
                    overflow: hidden;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                .row-a-face-text{
                    padding:0 20px;
                    text-align: left;
                }
            }
        }
        .row-a-col{
            background:#fff;    
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
            border-radius: 3px;
            height: 105px;
            display: flex;
            justify-content: left;
            align-items: center;
            position: relative;
            .row-a-col1{
                margin-left:20px;
                .row-a-col1txt{
                    margin-bottom:5px;
                }
            }
            .row-a-col2{
                position: absolute;
                top:30px;
                right:20px;
                width:40px;
                height:40px;
                border-radius: 40px;
                border:1px solid #eaeaea;
                text-align: center;
                line-height: 40px;
                .iconfont{
                    font-size: 20px;
                }
            }

        }
        .steps {
            position: relative;
            margin: 30px 0;
            overflow: hidden;
            z-index: 9;    
            width: 1000px;
            margin: 12px auto 0;

        }
        .gj-li{
            cursor: pointer;
            position:relative;
            width:160px;
            float:left;
            box-sizing: border-box;
            padding:0 10px;
            text-align: center;
            font-size: 18px;
            color:#c6c6c6;
            &::before{
                content:'';
                display:block;
                width:100%;
                height:3px;
                top:88px;
                background:#ebebeb;
                position: absolute;
            }
            .gj-name{
                display:table;
                line-height: 25px;
                .gj-name-cell{
                    display:table-cell;
                    vertical-align: middle;
                    text-align: center;
                    width: 160px;
                    height: 60px;
                    font-size: 16px; 
                    >div{
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                    }
                }
            }
            .gj-circle{
                width:20px;
                height:20px;
                border-radius: 10px;
                padding:3px 0 0 3px;
                margin:20px auto 18px;
                box-sizing: border-box;
                background:#c6c6c6;
                position: relative;
                &::before{
                    content:'';
                    display:block;
                    width:14px;
                    height:14px;
                    border-radius: 17px;
                    background:#fff;
                }
            }
            .gj-time{
                font-size: 14px;
            }
        }
        .gj-li.active{
            color:#1479ed;
            .gj-name{
                
            }
            .gj-circle{
                background:#1479ed;
            }
            .gj-time{}
        }
        .el-carousel__indicators--outside{
            display:none;
        }
        .stopp{
            cursor: not-allowed;
            background-color: none;
            border-color: none;
            color: #c0c4cc;
        }
        .el-col-5 .el-carousel__indicator .el-carousel__button{
            background-color: #eaeaea;
        }
        .el-col-5 .is-active.el-carousel__indicator .el-carousel__button{
            background-color: #1277eb;
        }
    }
</style>